<script setup>
import { ref, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import { listMyAppointmentsVoByPageUsingPost } from "@/api/appointmentsController";
import { listWorkPlanVoByPageUsingPost } from "@/api/workPlanController";

// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  current: 1,
  pageSize: 10,
};

const searchParams = ref({
  ...initSearchParams,
});
const dataList = ref([]);
const dataList1 = ref([]);
/**
 * 加载数据
 */
const loadData = async () => {
  const res = await listMyAppointmentsVoByPageUsingPost(searchParams.value);
  const resqust = await listWorkPlanVoByPageUsingPost(searchParams.value);
  if (res.data.code === 0 && resqust.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    dataList1.value = res.data.data?.records || [];
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

const aaa = async () => {
  const resqust = await listWorkPlanVoByPageUsingPost(searchParams.value);
  console.log(resqust);
};
/**
 * 监听 searchParams 变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  loadData();
});
</script>

<template>
  <div class="enj">
    <a-card class="card-demo" hoverable v-for="item in dataList" :key="item.id">
      <h4>{{ item.title }}</h4>
      {{ item.content }}
      <a-progress
        :percent="0.5"
        :style="{ width: '50%' }"
        animation
        style="margin-left: 30px"
      />
    </a-card>
    <a-button @click="aaa">asdfsd</a-button>
  </div>
</template>

<style scoped>
.enj {
  display: flex;
  flex-wrap: wrap;
  width: 1000px;
  height: 800px;
  margin: 0 auto;
  background: #f5f5f5;
}
.card-demo {
  width: 300px;
  height: 200px;
  margin-top: 15px;
  margin-left: 24px;
  transition-property: all;
}
.card-demo:hover {
  transform: translateY(-4px);
}
</style>
